<template>
  <!-- 滚动组件外层的框-->
  <view class="">
    <!-- 滚动区域 -->
    <scroll-view
      class="scroll-component"
      :class="className"
      :scroll-top="scrollTop"
      scroll-y="true"
      :style="{
        height: `calc(100vh - ${statusBarHeight}px - ${otherHeight}rpx`,
      }"
      :upper-threshold="100"
      :lower-threshold="100"
      :refresher-triggered="triggered"
      :refresher-enabled="true"
      refresher-default-style="none"
      :refresher-threshold="20"
      @refresherpulling="onPulling"
      @scrolltolower="lower"
      @scroll="scroll"
      @refresherrefresh="refresh"
    >
      <!-- 下拉刷新提示 -->
      <uni-load-more
        v-if="triggered"
        color="#007AFF"
        :status="triggeredStatus"
        :contentText="{ contentdown: refreshText }"
      />
      <slot name="contScrollBox"></slot>
      <view style="margin-bottom: 50rpx">
        <uni-load-more color="#007AFF" :status="status" :contentText="{ loadText }"
      /></view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  props: {
    //暂无数据的类型
    _type: {
      default: '',
      type: String,
    },
    //控制上拉加载时提示 loadmore代表还可以继续上拉加载 nomore没有更多数据 loading 加载中
    status: {
      default: 'loadmore',
      type: String,
    },
    triggeredStatus: {
      default: 'more',
      type: String,
    },
    //结合这个控制下拉刷新时加载圈的显示隐藏
    isRefresh: {
      default: false,
      type: Boolean,
    },
    //除了标题栏和状态栏以外的高度
    otherHeight: {
      default: 0,
      type: Number,
    },
    //下拉加载时加载圈的背景色
    bgColor: {
      default: '',
      type: String,
    },
    //加载中，上拉加载时，暂无更多数据时所提示的文案
    loadText: {
      default: {
        contentdown: '轻轻上拉获取更多数据',
        contentrefresh: '努力加载中...',
        contentnomore: '暂无更多数据',
      },
      type: Object,
    },
    className: {
      default: '',
      type: String,
    },
  },
  computed: {
    triggered() {
      return this.isRefresh
    },
  },
  data() {
    return {
      old: {
        scrollTop: 0,
      },
      statusBarHeight: 0,
      scrollTop: 0,
      refreshText: '正在获取最新数据...', //刷新文案
    }
  },
  methods: {
    onPulling() {
      // 下拉
      this.$emit('onPulling')
    },
    // 自定义下拉刷新控件被下拉
    refresh(e) {
      this.$emit('refreshFun')
    },
    // 上拉加载
    lower: function (e) {
      this.$emit('lowerFun')
    },
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop
    },
  },
  mounted() {
    let $this = this
    uni.getSystemInfo({
      success: function (res) {
        let safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
        let safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : 20
        $this.statusBarHeight = safeAreaTop + safeAreaBot
      },
    })
  },
}
</script>
<style lang="scss">
.scroll-component {
  overflow-y: scroll;
}
::v-deep .u-loading-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  width: 750rpx;
}
.go-top {
  position: fixed;
  bottom: 208rpx;
  right: 0;
  z-index: 2;
  background-color: red;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #606266;
  border-radius: 50%;
}
.no-data-box {
  width: 750rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20%;
  margin-bottom: 10%;
  image {
    max-width: 600rpx;
  }
}
</style>
